<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <#include "/inc/nav.ftl"/>
    <@nav/>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">
                    <button id="btn-clear-cart" type="button" class="btn btn-danger">清空购物车</button>
                    <button id="btn-checkout" type="button" class="btn btn-success">提交订单</button>
                    <button id="btn-seat" type="button" class="btn btn-primary">餐桌分配</button>
                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">订单列表</div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <table width="100%" class="table table-striped table-borderdetailed table-hover" id="list">
                            <thead>
                            <tr>

                                <th>菜品名</th>

                                <th>单价</th>
                                <th>份量</th>

                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div class="form-group">
                            <label>餐桌</label>
                            <input id="seatNumber" name="seatNumber" class="form-control" onfocus="this.blur()">
                            </input>
                            <label>总金额</label>
                            <input id="totalPrice" name="totalPrice" value="" class="form-control" onfocus="this.blur()">
                        </div>
                        <!-- /.table-responsive -->

                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Scripts  -->
<script>
    $(document).ready(function() {

        var table = $('#list').DataTable({   //此处list与页面table的id相同
            ajax: '${contextPath}/cart/list',
            language: {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
            },
            columns: [
                {data: "commodityName"},
                {data: "price"},
                {data: "qty"}
            ],
            responsive: true,
            select: true //datatables select 插件
        });
        otherAjax();
        function otherAjax(){
            $.ajax({
                type: "get",
                url: "${contextPath}/cart/list",
                dataType: "json",
                success: function(json) {
                    if (!json.result) {
                        layer.msg(json.msg, {
                            time: 1000,
                            icon: 2
                        });
                    }else{
                        $("#totalPrice").val(json.orders.totalPrice);
                    }
                    $("#seatNumber").val(json.seat.seatNumber);
                },
                error: function() {
                    layer.msg('系统出错!', {
                        time: 1000,
                        icon: 2
                    });
                }
            });
        }
        /* 清空购物车按钮 */
        $('#btn-clear-cart').click(function() {

            layer.msg('你确定清空该购物车吗?', {
                time: 0,
                title: "清空购物车",
                success: function (layero, index) {
                    function fn(event) {
                        if (event.keyCode === 27) {
                            layer.close(index)
                        }
                        if (event.keyCode === 13) {
                            $('.layui-layer-btn0').click();
                        }
                    }

                    $(window).one('keydown', fn);
                },
                area: ['300px', '150px'],
                fixed: false, //不固定
                btn: ['确定', '取消'],
                yes: function (index) {
                    $.ajax({
                        type: "post",
                        url: "${contextPath}/cart/clearCart",
                        dataType: "json",
                        success: function(data) {
                            if (data.result) {
                                layer.msg(data.msg, {
                                    time: 1000,
                                    icon: 1
                                });
                                parent.location.reload();
                            }
                        },
                        error: function() {
                            layer.msg('系统出错!', {
                                time: 1000,
                                icon: 2
                            });
                        }
                    });
                    layer.close(index);
                }
            });
        });
        /* 提交订单按钮 */
        $('#btn-checkout').click(function() {
            $.ajax({
                    type: "get",
                    url: "${contextPath}/cart/checkout",
                    dataType: "json",
                    success: function (json) {
                        if (!json.result) {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 2
                            });
                        } else {
                            layer.msg(json.msg, {
                                time: 1000,
                                icon: 1
                            });
                            parent.location.reload();
                        }
                    },
                    error: function () {
                        layer.msg('系统出错!', {
                            time: 1000,
                            icon: 2
                        });
                    }

            });
        });
        /* 餐桌分配按钮 */
        $('#btn-seat').click(function() {

                layer.open({
                    type: 2,
                    title: "提交订单",
                    area: ['400px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/cart/view_assignSeat',
                    end: function(index) {
                        parent.location.reload()
                    }
                });

        });




    });
</script>
</body>

</html>